<template>
  <div class="customerMgtList">
    <div class="header-top">
      <ul class="tablist">
        <li :class="active==0?`active`:``" @click="getActive(0)"> 近2周记录</li>
        <li :class="active==1?`active`:``" @click="getActive(1)"> 2周前记录</li>
      </ul>
      <changeEnterprise v-model="enterpriseValue"></changeEnterprise>
      <div class="head-right">
        <el-button style="margin-left: 10px" @click.native="getDeleteRecord">朋友圈数据</el-button>
        <el-button type="text" style="margin-left: 10px" @click.native="getViewIlustrate">朋友圈发布失败常见原因</el-button>
      </div>
    </div>
    <div class="tips" v-if="active==0"><i class="el-icon-warning"></i>支持多企微号批量创建朋友圈任务，设定的发布时间到了自动发布，无需员工点击确认 <el-popover
      placement="top-start"
      width="200"
      trigger="hover">
      <div class="example"><img src="@/assets/images/friendImg.png"/></div>
      <span slot="reference" style="color: #2d8cf0; margin-left: 10px;">示例</span>
    </el-popover></div>
    <!-- 近2周记录-->
    <lastWeekList v-if="active==0"></lastWeekList>
    <!--    <deleteRecord v-if="showDeleteRecord" :visableIf.sync="showDeleteRecord"></deleteRecord>-->
    <!--    <viewIlustrate v-if="showViewIlustrate" :visableIf.sync="showViewIlustrate"></viewIlustrate>-->
  </div>
</template>

<script>


export default {
  name: "circleFriendsMgt",
  components: {
    'lastWeekList': () => import('./lastWeekList.vue'),//导出弹窗
    'changeEnterprise':()=> import('@/views/components/changeEnterprise.vue'),
  },
  data() {
    return {
      active: 0,
      checked: true,//勾选自动应用
      showDeleteRecord: false,
      showViewIlustrate: null,//修改
      enterpriseValue:1,//获取企业的值
      enterpriseList:[
        {value:1,label:'锐行'},
        {value:2,label:'志新'},
      ],
    };
  },
  created() {
    if (this.$route.query && this.$route.query.urlActive) {
      this.active = this.$route.query.urlActive;
      console.log( this.$route.query,' this.active');
    }
  },
  methods: {
    getActive(index) {
      this.active = index;
    },
    getViewIlustrate() {
      this.showViewIlustrate = true;
    },
    getDeleteRecord() {
      this.showDeleteRecord = true;
      console.log('this.showDeleteRecord', this.showDeleteRecord);
    }
  }
};
</script>
<style lang="scss" scoped>
.tips {
  margin: 0px 0px 0;
  display: block;
  border-radius: 2px;
  background-color: #f0f5ff;
  font-size: 14px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0px 20px;

  i {
    color: #f8ac59;
    margin-right: 10px;
  }
}

.app-container {
  //background: #fff;
}

.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-right {
    position: absolute;
    height: 100%;
    display: flex;
    justify-items: center;
    right: 30px;
    align-items: center;

    .el-button--medium {
      padding: 5px 12px !important;
      height: 32px;
      display: flex;
      justify-items: center;
      justify-content: center;
    }
  }

  .divider {
    margin: 0 20px;
    width: 1px;
    height: 16px;
  }
}

.content-big {
  margin: 12px;
  height: calc(100vh - 180px);
  overflow-y: auto;

  .el-form {
    padding: 10px;
    background: #fff;
    border-radius: 8px;

    .el-form-item {
      margin-bottom: 10px;

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;

        > span {
          color: #777;
          width: 89px;
          display: inline-block;
          white-space: nowrap;
        }

        .el-select {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        .el-input {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
        }
      }

    }
  }

  .content-tabel {
    background: #fff;
    margin-top: 10px;

    .content-head {
      height: 60px;
      display: flex;
      justify-content: space-between;
      padding: 16px;

      .content-left {
        display: flex;
        align-items: center;

        .left-number {
          font-size: 12px;
          color: rgba(0, 0, 0, .45);
          margin-left: 10px;
        }

        .group-btn {

        }
      }

      .content-right {
        display: flex;
        align-items: center;

        .example {
          font-size: 14px;
          display: flex;
          align-items: center;
          margin-right: 20px;

          .el-switch {
            margin-right: 10px;
            margin-left: 5px;
          }
        }
      }
    }

    .el-table {
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    height: 60px;
  }
}

.table-footer {
  position: fixed;
  left: 226px;
  right: 0;
  bottom: 0;
  height: 56px;
  padding: 12px 16px;
  border-top: 1px solid #e9e9e9;
  background: #fff;
  z-index: 2;
  display: flex;
  justify-content: space-between;

  .footer-left {
    display: flex;
    align-items: center;

    .chooseAll {
      color: #5993ff;
      margin-right: 10px;
    }

    span {
      margin: 0px 10px;
      color: #5993ff;
    }
  }

  .footer-right {
    .el-dropdown {
      margin-right: 10px;

      .el-button--primary {
        border-radius: 4px;
        color: rgba(0, 0, 0, .65);
        border: 1px solid #e9e9e9;
        background: #fff;
      }
    }
  }
}

.tablist {
  font-size: 14px;
  margin-right: 10px;
  display: flex;
  align-items: center;

  li {
    cursor: pointer;
    font-weight: bold;
    list-style: none;
    margin: 0px 10px;
    position: relative;
    display: flex;
    height: 44px;
    align-items: center;

    &.active {
      color: #3070ff;

      &:after {
        content: '';
        position: absolute;
        height: 2px;
        background: #3070ff;
        width: 100%;
        bottom: 0px;
        left: 0px;
      }
    }
  }

  .example-modal {
    position: fixed;
    left: 0;
    margin-top: 10px;
    display: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    background: #FFFFFF;

    .example-cover {
      height: 600px;
    }
  }
}
.example {
  img {
    width: 200px;
  }

}
</style>
